<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>朦胧省略</title>
</head>
<body>
  <div>
    <p>
      Etiam commodo vestibulum sem in euismod. Quisque dapibus ac odio eget mattis. Donec tincidunt porta scelerisque. Curabitur gravida ex in erat venenatis elementum. Nulla imperdiet, lectus id finibus lacinia, quam urna laoreet massa, in ultricies metus metus vel nisl. In a bibendum enim, sit amet iaculis lorem. Integer vestibulum at odio a feugiat. Donec vitae erat vitae eros sodales bibendum. Sed id lorem et ante tincidunt auctor. Aliquam erat volutpat. Aenean fringilla scelerisque quam eu tristique. Aenean ac arcu sed enim mattis laoreet eu in odio. Aliquam in leo mattis, interdum dui non, egestas enim. Mauris at pulvinar ipsum, eu iaculis eros. Aliquam interdum enim et erat feugiat tincidunt. Etiam a ornare nulla, a bibendum orci.
    </p>
  </div>
</body>
<style>
  div {
    width: 20%;
    border: black solid 1px;
  }

  p {
    height: 287px;
    overflow: hidden;
    /* 需要设置相对位置 */
    position: relative;
    /* 文本对齐 */
    text-align: justify;
  }

  p::after {
    content: "";
    position: absolute;
    height: 1.2em;
    width: 20%;
    background: linear-gradient(
      to right, rgba(255, 255, 255, 0), #ffffff 80%
    );
    right: 0;
    bottom: 0;
    margin-bottom: 0.2em;
  }
</style>
</html>